@include b(markdown-message) {
  padding: 6px 10px;

  .cherry {
    border-radius: #{getCssVar('ai-chat', 'border-radius')};
    box-shadow: none;

    *::-webkit-scrollbar {
      width: getCssVar('ai-chat', 'scroll-bar-width');
      height: getCssVar('ai-chat', 'scroll-bar-height');
    }

    *::-webkit-scrollbar-thumb {
      background-color: getCssVar(color, fill, 2);
      border-radius: getCssVar('ai-chat', 'scroll-bar-radius');
    }

    *::-webkit-scrollbar-thumb:hover {
      background-color: getCssVar(color, fill, 2);
    }

    div[data-type=codeBlock] pre[class*=language-]::-webkit-scrollbar-thumb {
      background-color: #fff3;
    }
  }

  .cherry-markdown pre {
    background-color: getCssVar(ai-chat, background, color);
  }

  .cherry-markdown pre {
    background-color: getCssVar(ai-chat, background, color);
  }

  .cherry-previewer {
    padding: 8px;
    border: 0;

    figure {
      max-width: 1200px;

      > svg {
        width: 100%;
        min-height: 100px;
      }
    }
  }

  .anchor {
    display: none !important;
  }

  @include when(loading) {
    @include b(markdown-message-header) {
      @include e(caption) {
        font-size: 0;

        &::after {
          display: block;
          width: 11px;
          height: 11px;
          content: '';
          border: 3px solid #3b3b3b;
          border-top-color: transparent;
          border-radius: 100%;
          animation: circle infinite 0.75s linear;
        }
      }
    }
  }
}

@include b(markdown-message-header) {
  display: flex;
  margin-bottom: 8px;

  @include e(caption) {
    flex: 0;
    width: auto;
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    margin-right: 2px;
    font-size: 14px;
    font-weight: 800;
    color: #{getCssVar('ai-chat', 'color')};
  }

  @include e(timeout) {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 14px;
    color: getCssVar(color, danger);
  }
}

@include b(markdown-message-content) {
  padding: 10px 16px;
  background-color: getCssVar('ai-chat', 'background-color-light');
  border-radius: getCssVar('ai-chat', 'border-radius');

  .cherry div.cherry-previewer {
    color: getCssVar(ai-chat, color);
    background-color: getCssVar('ai-chat', 'background-color-light');
  }
}
@include b(markdown-message-footer) {
  padding: 10px 0;
}

@keyframes circle {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
